<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="../css/chooseStudent.css" rel="stylesheet" type="text/css">
    <!-- 引入layui css -->
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入layui js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
<!--模态框开始-->
<div id="modal" class="modal">
    <div class="modal-content">
        <header class="modal-header">
            <h4>选人加减分</h4>
            <span class="close">×</span>
        </header>
        <div class="modal-body">
            <div class="layui-form">
                <select id="score">
                    <option value="-2">-2</option>
                    <option value="-1">-1</option>
                    <option value="0" selected>请选择分数</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </div>
        </div>
        <footer class="modal-footer">
            <button id="sure">确定</button>
            <button id="cancel">取消</button>
        </footer>
    </div>
</div>
<!--模态框结束-->
<div id="MainBox" class="layui-form ">
    <div id="btn" onclick="chose()">点击开始选人</div>
    <select id="chose">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
<div id="StudentBox">

</div>
<script>
    let cancel = document.getElementById('cancel');
    let close = document.getElementsByClassName('close')[0];
    let sure = document.getElementById('sure');

    function chose() {
        let value = document.getElementById("chose").value;
        $.ajax({
            url: '/student/choose',
            method: 'get',
            data: {"random": value},
            async: false,
            success: function (data) {
                let innerHtml = '';
                let students = data.data;
                for (let i = 0; i < students.length; i++) {
                    innerHtml = innerHtml + '<div class="students" onclick="options(' + students[i].stuid + ')" >' + students[i].name + '</div>'
                }
                document.getElementById('StudentBox').innerHTML = innerHtml;
            },
            complete: function (xhr) {
                if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                    alert("登陆时间过长，请重新登陆!");
                    parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        });
    }

    function options(e) {
        console.log(e)
        $('#modal').show();
        sure.onclick = function () {
            let score = document.getElementById('score').value;
            if (score !== '0') {
                $.ajax({
                    url: '/student/alterScore',
                    method: 'post',
                    data: {"stuid": e, "score": score},
                    success: function (data) {
                        alert(data.message);
                        $('#modal').hide();
                    },
                    complete: function (xhr) {
                        if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                            alert("登陆时间过长，请重新登陆!");
                            parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                        }
                    }
                });
            } else {
                alert('请先选择分数');
            }
        }
    }

    close.onclick = function () {
        $('#modal').hide();
    }
    cancel.onclick = function () {
        $('#modal').hide();
    }
</script>


</body>
</html>